const input1 = document.getElementById("input1");
const fetchAPI = (e) => console.log("发起请求：", e.target.value);
// 基础版本的
// let timer = null;
// input1.addEventListener("input", (e) => {
//   if (timer) {
//     clearTimeout(timer);
//   }
//   timer = setTimeout(() => {
//     fetchAPI(e);
//      timer = null
//   }, 500);
// });

// 封装成公共方法的
// function debounce(fn, deplay = 500) {
//   let timer = null;
//   return function () {
//     if (timer) {
//       clearTimeout(timer);
//     }
//     timer = setTimeout(() => {
//       fn.apply(this, arguments);
//       timer = null;
//     }, deplay);
//   };
// }

// input1.addEventListener(
//   "input",
//   debounce(function (e) {
//     fetchAPI(e);
//   }, 1000)
// );

// 带有 立刻执行和 取消的 高阶版本
const debounce = (func, wait = 0) => {
  let timeout = null;
  let args;
  function debounced(...arg) {
    args = arg;
    if (timeout) {
      clearTimeout(timeout);
      timeout = null;
    }
    // 以 Promise 形式 返回函数执行结果
    return new Promise((res, rej) => {
      timeout = setTimeout(async () => {
        try {
          const result = await func.apply(this, args);
          res(result);
        } catch (e) {
          rej(e);
        }
      }, wait);
    });
  }
  function cancel() {
    clearTimeout(timeout);
    timeout = null;
  }
  function flush() {
    cancel();
    return func.apply(this, args);
  }
  //   可以在函数身上绑定函数？？ 老铁 6666
  debounced.cancel = cancel;
  debounced.flush = flush;
  return debounced;
};
